<div class="box-container">

    <div class="main-content">

        <div class="content-body">
                <div class="content-top-bar">
                    <div>
                        日期： <nz-date-picker [ngModel]="today" nzDisabled></nz-date-picker>
                    </div>

                    <div class="custom-btn-group">
                        <a class="top-bar-btn" (click)="openDetailModal()">
                            <i nz-icon nzType="unordered-list" nzTheme="outline"></i>
                        </a>
                        <a class="top-bar-btn" (click)="export()">
                            <i nz-icon nzType="file-excel" nzTheme="outline"></i>
                        </a>
                        <!--<a class="top-bar-btn" (click)="print()">-->
                            <!--<i nz-icon nzType="printer" nzTheme="outline"></i>-->
                        <!--</a>-->
                    </div>
                </div>
                <div>
                    <nz-table
                        #groupingTable
                        [nzData]="tableData"
                        nzBordered
                        nzSize="middle"
                    >
                        <thead>
                        <tr>
                            <th rowspan="2">名称</th>
                            <th rowspan="2">警戒水位</th>
                            <th rowspan="2">限定流量</th>
                            <th colspan="2">4时</th>
                            <th colspan="2">8时</th>
                            <th colspan="2">12时</th>
                            <th colspan="2">16时</th>
                            <th colspan="2">20时</th>
                            <th colspan="2">24时</th>
                        </tr>
                        <tr>
                            <th>水位</th>
                            <th>流量</th>
                            <th>水位</th>
                            <th>流量</th>
                            <th>水位</th>
                            <th>流量</th>
                            <th>水位</th>
                            <th>流量</th>
                            <th>水位</th>
                            <th>流量</th>
                            <th>水位</th>
                            <th>流量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr *ngFor="let data of groupingTable.data">
                            <td>{{ data.name }}</td>
                            <td>{{ data.level }}</td>
                            <td>{{ data.flow }}</td>
                            <td>{{ data.level_4 }}</td>
                            <td>{{ data.flow_4 }}</td>
                            <td>{{ data.level_8 }}</td>
                            <td>{{ data.flow_8 }}</td>
                            <td>{{ data.level_12 }}</td>
                            <td>{{ data.flow_12 }}</td>
                            <td>{{ data.level_16 }}</td>
                            <td>{{ data.flow_16 }}</td>
                            <td>{{ data.level_20 }}</td>
                            <td>{{ data.flow_20 }}</td>
                            <td>{{ data.level_24 }}</td>
                            <td>{{ data.flow_24 }}</td>
                        </tr>
                        </tbody>
                    </nz-table>
                </div>
                <div class="charts-container">
                    <div echarts [options]="basicOpts" [merge]="customOpts" class="charts-cell"></div>
                    <div echarts [options]="basicOpts" [merge]="customOpts" class="charts-cell"></div>
                </div>
            </div>
    </div>
</div>

<nz-modal [nzBodyStyle]="nzBodyStyle" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
          (nzOnCancel)="onCancel()" (nzOnOk)="onCancel()">
    <div>
        日期： <nz-date-picker [(ngModel)]="datePicker" (ngModelChange)="queryInfo($event)"></nz-date-picker>
    </div>

    <div>
        <nz-table
            #groupingTable
            [nzData]="tableData"
            nzBordered
            nzSize="middle"
        >
            <thead>
            <tr>
                <th rowspan="2">名称</th>
                <th rowspan="2">警戒水位</th>
                <th rowspan="2">限定流量</th>
                <th colspan="2">4时</th>
                <th colspan="2">8时</th>
                <th colspan="2">12时</th>
                <th colspan="2">16时</th>
                <th colspan="2">20时</th>
                <th colspan="2">24时</th>
            </tr>
            <tr>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
                <th>水位</th>
                <th>流量</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let data of groupingTable.data">
                <td>{{ data.name }}</td>
                <td>{{ data.level }}</td>
                <td>{{ data.flow }}</td>
                <td>{{ data.level_4 }}</td>
                <td>{{ data.flow_4 }}</td>
                <td>{{ data.level_8 }}</td>
                <td>{{ data.flow_8 }}</td>
                <td>{{ data.level_12 }}</td>
                <td>{{ data.flow_12 }}</td>
                <td>{{ data.level_16 }}</td>
                <td>{{ data.flow_16 }}</td>
                <td>{{ data.level_20 }}</td>
                <td>{{ data.flow_20 }}</td>
                <td>{{ data.level_24 }}</td>
                <td>{{ data.flow_24 }}</td>
            </tr>
            </tbody>
        </nz-table>
    </div>

</nz-modal>
